<template>
  <div class="main-container container-fluid container-limited page-holder">
    <div class="page-title-holder">
      <h2 class="page-title">学习群组</h2>
    </div>
    <el-menu mode="horizontal" class="deep-color a-link-item" default-active="1">
      <el-menu-item index="1">
        <router-link :to="`/groups`">我的群组</router-link>
      </el-menu-item>
      <groups-list-controls />
    </el-menu>
    <groups-list :groups="groups" :loading="loading" />
    <pagination :current-page="pagination.currentPage" :page-count="pagination.pageCount" />
  </div>
</template>

<script>
import GroupsListControls from './components/groups-list-controls';
import GroupsList from './components/groups-list';
import { formatGroups } from '../format';

export default {
  name: 'GroupsIndex', // 群组列表
  components: { GroupsListControls, GroupsList },
  data() {
    return {
      groups: [], // 群组列表
      loading: false,
      pagination: {
        currentPage: null,
        pageCount: null,
      },
    };
  },
  computed: {
    loadGroupsParams() {
      return {
        page: this.$route.query.page || 1,
      };
    },
  },
  created() {
    this.loadGroups();
  },
  methods: {
    // 加载群组列表
    loadGroups() {
      this.loading = true;
      this.$api.groups.index(this.loadGroupsParams)
        .then((res) => {
          this.groups = formatGroups(res.data);
          this.pagination.currentPage = res.kaminari.current_page;
          this.pagination.pageCount = res.kaminari.total_pages;
        })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
  watch: {
    loadGroupsParams() { this.loadGroups(); },
  },
};
</script>

<style></style>
